<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品名称：</span>
                <el-input placeholder="输入商品名称" v-model.trim="good_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">用户UID：</span>
                <el-input placeholder="输入用户UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">售后日期：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__item">
                <span class="task-one__label">下单时间：</span>
                <el-date-picker
                    v-model="pay_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane :label="`${item.label}(${item.nums})`" :name="item.name" v-for="item in tabarr" :key="item.name">
                <div class="table-head flexs">
                    <div class="table-check"></div>
                    <div class="table-good table-head-base">商品信息</div>
                    <div class="table-price table-head-base">合计价格</div>
                    <div class="table-pay-type table-head-base">供应商信息</div>
                    <div class="table-buy-info table-head-base">用户信息</div>
                    <div class="table-oper table-head-base">操作</div>
                </div>
                <!-- 内容 -->
                <div class="table-body" v-loading="loading">
                    <template v-if="arr_data.length > 0 && !loading">
                        <div class="table-item" v-for="(item, index) in arr_data" :key="item.order_id">
                            <div class="table-item-head flexs">
                                <div class="table-item__head-left">
                                    <div class="table-check" style="margin-right: 12px"></div>
                                    <p class="item-head__sn">退款编号：{{ item.refund_no }}</p>
                                    <p class="item-head__sn">订单编号：{{ item.order_sn }}</p>
                                    <p class="item-head__text">申请时间：{{ item.created_at_label }}</p>
                                    <p class="item-head__text">
                                        订单状态：<span v-if="tabName <= 1">{{ status_label[item.refund_status] }}</span><span v-else>已拒绝</span>
                                    </p>
                                </div>
                                <div class="table-item__head-right"></div>
                            </div>
                            <div class="table-item-cont">
                                <div class="table-good table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <div class="table-lr">
                                            <el-image
                                                class="table-lr__img"
                                                loading="lazy"
                                                :src="proxy.imgUrl + item.product_img + '!img_400'"
                                                fit="cover"
                                                v-if="item.product_img"
                                            />
                                            <div class="table-lr__right">
                                                <p class="lr-title line-one">{{ item.product_name }}</p>
                                                <p class="lr-text">
                                                    等级: {{ item.level }}，数量: {{ item.product_number }}{{ item.unit }}，颜色: {{ item.color }}
                                                </p>
                                                <p class="lr-text lr-price"><em>￥</em>{{ item.product_price }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-price table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <p>订单总额：<em style="font-size: 13px">￥</em>{{ item.pay_amount }}</p>
                                        <p>申请退款：<em style="font-size: 13px">￥</em>{{ item.refund_amount }}</p>
                                        <p>实际退款：<em style="font-size: 13px">￥</em>{{ item.real_refund_amount }}</p>
                                    </div>
                                </div>
                                <div class="table-pay-type table-head-base item-cont__base">
                                    <div class="table-sub" v-if="item.supplier">
                                        <p>{{ item.supplier.title }}[{{ item.supplier.supplier_id }}]</p>
                                    </div>
                                </div>
                                <div class="table-buy-info table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <div class="table-lr" v-if="item.user">
                                            <!-- <el-image
                                                class="table-lr__img img-round"
                                                loading="lazy"
                                                :src="proxy.imgUrl + item.user.face + '!img_400'"
                                                fit="cover"
                                                v-if="item.user.face"
                                            /> -->
                                            <div class="table-lr__right">
                                                <p class="lr-user">姓名：{{ item.user.name }}[UID: {{ item.user.uid }}]</p>
                                                <p class="lr-user">电话：{{ item.user.mobile }}</p>
                                                <!-- <div class="lr-user lr-addr">
                                                    <span class="lr-addr__left">地址：</span>
                                                    <p class="lr-detail line-two">{{ item.addr + item.house }}</p>
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-oper table-head-base">
                                    <div class="table-sub table-sub-btn">
                                        <el-button link type="primary" class="theme-btn" @click="clickDetail(item)">查看详情</el-button>
                                        <el-button link type="primary" class="theme-btn" @click="clickExam(item)" v-if="tabName == 0">
                                            审核
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="table-body__none" v-if="arr_data.length == 0 && !loading">暂无数据</div>
                </div>
                <!-- 分页 -->
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

        <!-- 审核 -->
        <el-dialog v-model="dialogMoney" title="售后审核" width="580px" top="9vh" :append-to-body="true" :destroy-on-close="true" @close="closeExam">
            <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="120px">
                <el-form-item label="商品名称">
                    <p>{{ ruleForm.good_name }}</p>
                </el-form-item>
                <el-form-item label="商品金额">
                    <p>{{ ruleForm.price }}</p>
                </el-form-item>
                <el-form-item label="供应商价格">
                    <p>{{ ruleForm.cost_price }}</p>
                </el-form-item>
                <el-form-item label="申请退款金额">
                    <p>{{ ruleForm.refund_amount }}</p>
                </el-form-item>
                <el-form-item label="实际退款金额" prop="real_refund_amount">
                    <el-input
                        v-model.trim="ruleForm.real_refund_amount"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入实际退款金额"
                    />
                </el-form-item>
                <el-form-item label="供应商扣款" prop="deduct_price">
                    <el-input
                        v-model.trim="ruleForm.deduct_price"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入供应商扣款，无需扣款填0"
                    />
                </el-form-item>
                <!-- <el-form-item label="客户备注" prop="kf_reason">
                    <el-input v-model.trim="ruleForm.kf_reason" type="textarea" clearable :rows="2" placeholder="请输入客户备注内容" />
                </el-form-item>
                <el-form-item label="供应商备注" prop="gys_reason">
                    <el-input v-model.trim="ruleForm.gys_reason" type="textarea" clearable :rows="2" placeholder="请输入供应商备注内容" />
                </el-form-item> -->
                <el-form-item label="审核备注" prop="reason">
                    <el-input v-model.trim="ruleForm.reason" type="textarea" clearable :rows="2" placeholder="请输入审核备注" />
                </el-form-item>
                <el-form-item label="审核结果" prop="exam_type">
                    <el-radio-group v-model="ruleForm.exam_type">
                        <el-radio label="1">通过</el-radio>
                        <el-radio label="2">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 30px">
                        <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)">确认调整</el-button>
                        <el-button @click="resetForm(ruleRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, reactive, onBeforeUnmount } from "vue"
import { useRouter, onBeforeRouteLeave } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import { useBaseStore } from "@store/base"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const store = useBaseStore()
const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getCount()
})

onBeforeUnmount(() => {})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "AfterSalesDetail") {
        store.setInclude("AfterSales")
    } else {
        store.delInclude("AfterSales")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        status: status.value, // 筛选条件[1:待审核,2:已通过,3:已拒绝]
        so: good_name.value,
        order_sn: order_sn.value,
        uid: user_id.value,
        supplier_id: supplier_id.value,
        s_day: area_time.value ? area_time.value[0] : "", // 投诉时间
        l_day: area_time.value ? area_time.value[1] : "",
        o_s_day: pay_time.value ? pay_time.value[0] : "", // 下单时间
        o_l_day: pay_time.value ? pay_time.value[1] : "",
    }
    getdata("order/refund/index", params)
}

// 搜索
const order_sn = ref("")
const good_name = ref("")
const area_time = ref("")
const pay_time = ref("") // 下单时间
const user_id = ref("")
const supplier_id = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * tab切换
 * @param {String} from_type tab切换的类型值
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const status = ref("1")
const status_label = ["等待处理", "退款中", "退款成功", "退款失败"]
const tabName = ref("0")
const tabarr = ref([
    {
        label: "待审核",
        name: "0",
        status: "1",
        nums: 0,
    },
    {
        label: "已通过",
        name: "1",
        status: "2",
        nums: 0,
    },
    {
        label: "已拒绝",
        name: "2",
        status: "3",
        nums: 0,
    },
])
const handleTab = (pane) => {
    status.value = tabarr.value[pane.index].status
    getCount(2)
}
function getCount(type = 1) {
    proxy.$axios
        .get("order/refund/tongji")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                tabarr.value[0].nums = result.wait_verify_count
                tabarr.value[1].nums = result.verify_count
                tabarr.value[2].nums = result.refuse_count
                type == 1 && getList()
                type == 2 && pubRefreshParams(getList)
                type == 3 && pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 审核
 * @param {Boolean} dialogMoney 弹窗状态
 * @property {Array} ruleRef 表单规则
 * @property {Object} ruleForm  表单字段
 * @property {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const dialogMoney = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    id: "",
    price: "",
    good_name: "",
    deduct_price: "0", // 供应商扣款
    refund_amount: "", // 申请退款金额
    real_refund_amount: "", // 实际退款金额
    exam_type: "1", // 审核，1是通过，2不通过
    kf_reason: "",
    gys_reason: "",
    reason: "",
    cost_price: "",
})
const ruleCheck = reactive({
    exam_type: [{ required: true, message: "请选择审核结果", trigger: "change" }],
    real_refund_amount: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    deduct_price: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
})
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                refund_id: ruleForm.id,
                status: ruleForm.exam_type,
                real_refund_amount: ruleForm.real_refund_amount,
                deduct_money: ruleForm.deduct_price,
                refuse: ruleForm.reason,
            }
            proxy.$axios
                .post("order/refund/verify", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogMoney.value = false
                        proxy.$message({ message: "审核成功！", type: "success" })
                        getCount(3)
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closeExam = () => {
    dialogMoney.value = false
    resetForm(ruleRef.value)
}
const clickExam = (row) => {
    dialogMoney.value = true
    ruleForm.id = row.refund_id
    getExamDetail(row.refund_id)
}

function getExamDetail(id) {
    proxy.$axios
        .get("order/refund/detail", {
            params: {
                refund_id: id,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                ruleForm.good_name = result.product_name
                ruleForm.price = result.product_price
                ruleForm.cost_price = result.cost_price
                ruleForm.refund_amount = result.refund_amount
                ruleForm.real_refund_amount = result.real_refund_amount
                ruleForm.deduct_price = result.deduct_money
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 详情
const clickDetail = (row) => {
    router.push({
        path: "/Order/AfterSalesDetail",
        query: {
            rid: row.refund_id,
        },
    })
}
</script>
<script>
export default {
    name: "AfterSales",
}
</script>

<style lang="less" scoped>
.table-body__none {
    color: #909399;
    font-size: @font-size-md;
    text-align: center;
    padding-bottom: 20px;
}
.table-head {
    background-color: #f5f7fa;
    width: 100%;
    height: 50px;
    border-radius: @radius-sm;
    border: 1px solid #ebeef5;
    overflow: hidden;
    margin-bottom: @margin-mdl;
    padding: 0px @padding-md;
}

.table-body {
    .table-item {
        border: 1px solid #ebeef5;
        margin-bottom: @margin-mdl;
        .table-item-head {
            background-color: #f5f7fa;
            width: 100%;
            height: 46px;
            overflow: hidden;
            padding: 0px @padding-md;
            border-bottom: 1px solid #ebeef5;
            .table-item__head-left {
                display: flex;
                align-items: center;
                .item-head__sn {
                    font-size: @font-size-md;
                    font-weight: bold;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                }
                .item-head__text {
                    font-size: @font-size-md;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                    span {
                        color: @themes;
                    }
                }
            }
        }
        .table-item-cont {
            display: flex;
            & > div {
                padding: @padding-md @padding-xs;
                font-weight: 500;
                text-align: center;
                &:last-child {
                    text-align: left;
                    .el-button {
                        margin: 0 @margin-sm @margin-xs 0;
                    }
                }
            }
            .table-sub {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                & > p {
                    margin-bottom: 4px;
                }
            }
            .table-sub-btn {
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
            }
            .table-good {
                padding-left: @padding-md;
                padding-right: @padding-md;
                text-align: left;
            }
            .table-lr {
                margin-bottom: @margin-xs;
                .table-lr__right{
                    justify-content: center;
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .item-cont__base {
                border-right: 1px solid #ebeef5;
            }
        }
    }
}

.table-check {
    flex: none;
    margin-right: @margin-base;
}

.table-good {
    flex: 1;
}

.table-price {
    width: 18%;
    flex: none;
    text-align: center;
}
.table-pay-type {
    width: 14%;
    flex: none;
    text-align: center;
}
.table-buy-info {
    width: 18%;
    flex: none;
    text-align: center;
}
.table-oper {
    width: 14%;
    flex: none;
}
.table-head-base {
    font-size: @font-size-md;
    font-weight: 700;
    color: @gray-8;
    padding: 0px @margin-xs;
}
:deep(.el-checkbox__inner) {
    width: 16px;
    height: 16px;

    &::after {
        width: 3px;
        height: 7px;
        left: 5px;
        top: 2px;
    }
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
